{% extends 'AcmeDemoBundle::layoutMyMemory.html.twig.twig' %}

{% block content %}

<div id="templatemo_header">
    <div id="site_title"><h1><a href="" title="Funny zone">Funny zone</a></h1></div>
</div>
<div id="templatemo_main">
    <div id="content">

        <!-- Home -->
		<div id="home" class="section">
			<div id="home_about" class="box">
           	    <h2>Welcome
           	        {% if app.session.get('user_name') %}
           	            <span style="font-size: small;">{{ app.session.get('user_name') }}</span>
           	        {% endif %}
           	    </h2>
{#                 <p>Love is something made me happy with my sweet memories. I want to share all thing about mines to everyone. In my mind, just me and her in this world.</p>#}
{#                 <p>This our private website, so you can post our best pictures, chating, and listenning music in this. Do you like it? If you like, please give me a kiss. Baby</p>#}
                <div  id="myPlayerTarget"></div>
            </div>
            <div id="home_gallery" class="box no_mr">
                {% for aryData in aryNewImageList  %}
                    {% if (loop.index == 3 or loop.index == 6) %}
                        <a class="no_mr" href="{{ asset(aryData['image_path'] ~ aryData['name']) }}" rel="lightbox[gallery]"><img src="{{ asset(aryData['image_path'] ~ 'mini/' ~ aryData['name']) }}" alt="{{ aryData['name'] }}" /></a>
                    {% else %}
                        <a href="{{ asset(aryData['image_path'] ~ aryData['name']) }}" rel="lightbox[gallery]"><img src="{{ asset(aryData['image_path'] ~ 'mini/' ~ aryData['name']) }}" alt="{{ aryData['name'] }}" /></a>
                    {% endif %}
                {% endfor %}
            </div>

            <div class="box home_box1 color1">
            	<a href="#album"><img src="{{ asset('bundles/my_memory/images/album.jpg') }}" alt="Album" /></a>
            </div>

            <div class="box home_box1 color2">
	            <a href="#chat"><img src="{{ asset('bundles/my_memory/images/chit.jpg') }}" alt="Chat" /></a>
            </div>

            <div class="box home_box2 color3">



            </div>

            <div class="box home_box1 color4 no_mr">
            	<a href="#upload"><img src="{{ asset('bundles/my_memory/images/upload.jpg') }}" alt="Upload" /></a>
            </div>

        </div> <!-- END of home -->

        <!-- Album -->
        <div class="section section_with_padding" id="album" style="height: 900px">
            <h2>Album</h2>
                {% if aryNewAlbumList is defined %}
                    {% for aryData in aryNewAlbumList  %}
                        <br/>
                        <p>{{ aryData['title'] }}</p>
                        {% include "AcmeDemoBundle:Home:album.html.twig.twig"
                            with { aryNewImageList: aryData['image_list'], index : aryData['t_album_id'] }
                        %}
                        <script type="text/javascript">
                            var jssor_slider = new $JssorSlider$("slider1_container_{{ aryData['t_album_id'] }}", options);

                            ScaleSlider(jssor_slider);

                            if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
                                $(window).bind('resize', ScaleSlider(jssor_slider));
                            }
                        </script>


                    {% endfor %}
                {% endif %}

            <a href="#home" class="slider_nav_btn home_btn">home</a>
            <a href="#home" class="slider_nav_btn previous_btn">Previous</a>
            <a href="#chat" class="slider_nav_btn next_btn">Next</a>

        </div>

        <!-- Chat -->
        <div class="section section_with_padding" id="chat">
            <h2>Chat</h2>
            <form id="frmChat" name="frmChat" method="post" action="{{ path('_send_message') }}" >
                <div id="divChatList" style="height: 350px; border: 1px solid; overflow-y: scroll;">
                    {% if aryChatList is defined %}
                        {% for aryData in aryChatList  %}
                            <p>{{ aryData['message'] }}</p>
                        {% endfor %}
                    {% endif %}
                </div>
                <br/>
                <div>
                    <textarea  id="txtSendMsg" name="txtSendMsg" spellcheck='false' style="width: 100%; height: 50px;  resize: none; font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif " ></textarea >
                    <input type="hidden" id="hidOldCountMsg" value=""></input>
                </div>
            </form>

            <a href="#home" class="slider_nav_btn home_btn">home</a>
            <a href="#album" class="slider_nav_btn previous_btn">Previous</a>
            <a href="#upload" class="slider_nav_btn next_btn">Next</a>
        </div>

        <!-- Upload -->
        <div class="section section_with_padding" id="upload">
            <h2>Upload</h2>
            <form id="frmUpload" name="frmUpload" method="post" action="{{ path('_upload_file') }}" enctype="multipart/form-data"  >
                <div class="half left">
                    <a href="#" onclick="showPanel(1)">
                        <div class="box home_box2 color3" style="height: 100px">
                            <div id="social_links" style="margin-top: 5px">
                                <span style="font-size: 30px;text-decoration: none; color: white">Create Album</span>
                            </div>
                        </div>
                    </a>

                    <a href="#" onclick="showPanel(2)">
                        <div class="box home_box2 color4" style="height: 100px">
                            <div id="social_links" style="margin-top: 5px">
                                <span style="font-size: 30px;text-decoration: none; color: white">Image</span>
                            </div>
                        </div>
                    </a>

                    <a href="#" onclick="showPanel(3)">
                        <div class="box home_box2 color1" style="height: 100px">
                            <div id="social_links" style="margin-top: 5px">
                                <span style="font-size: 30px;text-decoration: none; color: white">Music</span>
                            </div>
                        </div>
                    </a>

                </div>

                <div class="half right">
                    <p>Choose a option to upload your file (max 10MB/file, sum max 20MB)</p>
                    <div id="divAlbum" style="display: none">
                        Title<br/>
                        <input type="text" id="txtTitle" name="txtTitle" value="" style="width: 100%" />
                        <br/><br/><br/>
                        <div id="divUploadList1" >
{#                             <div id="divFile_0">#}
{#                                 <input type="file" id="fileUpload_0" name="fileUpload_0" onchange="" ></input>#}
{#                                 <a id="linkAdd_0" href="#" onclick="addFile(1)">Add</a>#}
{#                                 <br/><span>Note</span><br/>#}
{#                                 <input type="text" id="txtNote_0" name="txtNote_0" value="" style="width: 95%" />#}
{#                             </div>#}
                        </div>
                        <br/><br/>
                        <input type="button" id="btnSubmit" name="btnSubmit" onclick="onSubmitUpload()" value="Upload" style="float: right" />
                    </div>

                    <div id="divImage" style="display: none">
                        <input type="file" id="fileUpload" name="fileUpload" onchange=""></input>
                        <br/><span>Note</span><br/>
                        <input type="text" id="txtNote" name="txtNote" value="" style="width: 100%" />
                        <br/><br/>
                        <input type="button" id="btnSubmit" name="btnSubmit" onclick="onSubmitUpload()" value="Upload" style="float: right" />
                    </div>

                    <div id="divMusic" style="display: none">
                        <div id="divUploadList3" >
{#                             <div id="divFile_0">#}
{#                                 <input type="file" id="fileUpload_0" name="fileUpload_0" onchange=""></input>#}
{#                                 <a id="linkAdd_0" href="#" onclick="addFile(3)">Add</a>#}
{#                             </div>#}
                        </div>
                        <br/><br/>
                        <input type="button" id="btnSubmit" name="btnSubmit" onclick="onSubmitUpload()" value="Upload" style="float: right" />
                    </div>

                    <input type="hidden" id="hidUploadType" name="hidUploadType" value="" />
                    <input type="hidden" id="hidUploadCount" name="hidUploadCount" value="0" />

                </div>
            </form>
			<a href="#home" class="slider_nav_btn home_btn">home</a>
            <a href="#chat" class="slider_nav_btn previous_btn">Previous</a>

        </div>


    </div>
</div>
</div>
<div id="templatemo_footer">
    <a class="templatemo_footer_icon" href="http://tr.onlyimage.com/" title="Ücretsiz resim arama"  target="_blank"><img src="{{ asset('bundles/my_memory/images/templatemo_footer_icon.png') }}" alt="Ücretsiz resim arama" title="Ücretsiz resim arama" /></a>Copyright © 2014 <a href="#">My demo</a> | <a href="http://www.templatemo.com/preview/templatemo_363_metro">Metro</a> by <a href="http://www.templatemo.com" target="_parent" title="free templates">thuongdpt</a>
</div>


<script type="text/javascript">

    function onSubmitUpload() {
        var frm = $('#frmUpload');
        frm.action = "{{ path('_upload_file') }}";
        $("#frmUpload").serialize();
    	frm.submit();
    }

    function onSubmitChat() {
    	var frm = $('#frmChat');
    	frm.submit();

    }

    // set time to get message

    $(document).ready (function () {
    	$('#hidUploadCount').val(0);
        $('#divAlbum').hide();
        $('#divImage').hide();
       // $('#hidUploadType').val(null);
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', "{{ asset('bundles/my_memory/sound/Message Sounds 1.mp3') }}");
        audioElement.volume=0.1;

        var updater = setInterval (function () {
            $('#divChatList').load ("{{ path('_get_message') }}");
            if( $('#hidOldCountMsg').val() != $('#hidNewCountMsg').val() ){
            	$('#hidOldCountMsg').val($('#hidNewCountMsg').val());

            	if( $('#hidNewMsgFromPartner').val() == 'true'){
                	// keep scroll in bottom
                    var objDiv = document.getElementById("divChatList");
                    objDiv.scrollTop = objDiv.scrollHeight;
                    audioElement.setAttribute('autoplay', 'autoplay');
                    audioElement.play();

                }

            }

        }, 1000);


        $("#txtSendMsg").keypress(function (e) {
            if(e.which == 13) {
            	onSubmitChat();
                e.preventDefault();
            }
        });


        $("#frmChat").submit(function(e){
	        e.preventDefault();

	        dataString = $("#frmChat").serialize();

	        $.ajax({
    	        type: "POST",
    	        url: "{{ path('_send_message') }}",
    	        data: dataString,
    	        dataType: "text",
    	        beforeSend: function(jqXHR, settings){
    	        	//reset text
    	        	$('#txtSendMsg').val('');

    	        },
    	        error: function(jqXHR, textStatus, errorThrown){

    	        },
    	        success: function( data, textStatus, jqXHR) {
    	        	if(data.success){

    	        	}
    	        },
    	        complete: function(jqXHR, textStatus){
    	        	$('#divChatList').append(formatStrMsg(jqXHR.responseText));
    	            $('#txtSendMsg').val(null);
    	            var objDiv = document.getElementById("divChatList");
                    objDiv.scrollTop = objDiv.scrollHeight;

    	        }
	        });
	    });


        var myPlaylist = [
                {% if aryMusicList is defined %}
                    {% for aryData in aryMusicList  %}
                        {
        					file  : "{{ asset(aryData['path'] ~ aryData['name']) }}",
        					title : "{{ aryData['name'] }}",
        					image : "",
        				},
                    {% endfor %}
				{% endif %}

		];

        // review in website of wimpy to control
        var myPlayer = new wimpyPlayer({
        	target : "myPlayerTarget",
        	media : myPlaylist,
        	skin : "{{ asset('bundles/my_memory/js/wimpy/wimpy.skins/045new3.tsv') }}",
        	startUpText : "Relax now",
        	size : "310,245",
            autoPlay : 0,
            // coverArt : "{{ asset('bundles/my_memory/images/contact.jpg') }}",
            downloadEnable : 0,
            loop : 1,
            volume : 0.2,
        });

    });

	function formatStrMsg(strMsg) {
		var currentdate = new Date();
		var strTime = currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
		strMsg = "<p style='padding-left:5px'><span style='font-weight:bold;color: aqua'>("+strTime+")Oxa: </span>" + strMsg + "</p>";
		//strMsg += "<span style='float:right; padding-right:5px'>" + strTime + "</span><br/>";
		return strMsg;
	}

    function uploadFileAjax() {


    	/*
    	var data, xhr;
        data = new FormData();
        data.append( 'fileUpload', $('#fileUpload')[0].files[0] );

        xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        xhr.onreadystatechange = function ( response ) {
    	    if(xhr.readyState == 4  && xhr.status == 200) {
    	    	//alert(xhr.responseText);
    	    }
    	};
    	// before send
    	xhr.onprogress = function () {
    	    //alert('before');
    	};
    	// success
    	xhr.onload = function () {
    	    var strFullPath = "{{ image_url }}" + xhr.responseText;
    	    //$('#imgAvatar').attr('src', strFullPath);
    	    //$('#aryUser_hidAvatarPath').val(strFullPath);
    	};

    	//xhr.open( 'post', '<?php echo url_for("@upload_file?target=avatar") ?>', true );
        xhr.send( data );
        */
    }

    /*
    * type=1 : upload list image
    * type=2 : upload image
    * type=3 : upload music
    */
    function showPanel(type) {

    	if( $('#hidUploadType').val() != type ) {
        	resetFileList(type);
        }

        if(type == 1) {
            $('#divAlbum').show();
            $('#divImage').hide();
            $('#divMusic').hide();

        } else if(type == 2) {
        	$('#divAlbum').hide();
        	$('#divImage').show();
        	$('#divMusic').hide();

        } else if(type == 3) {
        	$('#divAlbum').hide();
        	$('#divImage').hide();
        	$('#divMusic').show();

        }

        $('#hidUploadType').val(type);
    }

    /*
    * type = 1: upload image list
    * type = 3: upload music
    */

    function addFile(type) {

    	var index = $('#hidUploadCount').val();
        var nextIndex = parseFloat(index) + 1;

        if(countValidFile() == 2) {
        	var objDivList_ = document.getElementById('divUploadList' + type);
    		objDivList_.setAttribute("style", "overflow-y: scroll; height: 200px");
    	}
        var objFile = document.createElement('input');
    	objFile.setAttribute('type', 'file');
    	objFile.setAttribute('id', 'fileUpload_' + nextIndex);
    	objFile.setAttribute('name', 'fileUpload_' + nextIndex);

    	var objLink = document.createElement('a');
    	objLink.setAttribute('href', '#');
    	objLink.setAttribute('id', 'linkAdd_' + nextIndex);
    	objLink.setAttribute('name', 'linkAdd_' + nextIndex);
    	objLink.innerHTML = "Add";
    	objLink.setAttribute('onclick', 'addFile(' + type + ')');

    	var objDiv = document.createElement('div');
    	objDiv.setAttribute('id', 'divFile_' + nextIndex);

        if(type == 1) {
        	var objNote = document.createElement('input');
        	objNote.setAttribute('type', 'text');
        	objNote.setAttribute('id', 'txtNote_' + nextIndex);
        	objNote.setAttribute('name', 'txtNote_' + nextIndex);
        	objNote.setAttribute('style', 'width: 95%');

        	var objSpan = document.createElement('span');
        	objSpan.innerHTML = "Note";

        	objDiv.appendChild(document.createElement('br'));
        	objDiv.appendChild(objFile);
    		objDiv.appendChild(objLink);
    		objDiv.appendChild(document.createElement('br'));
    		objDiv.appendChild(objSpan);
    		objDiv.appendChild(document.createElement('br'));
    		objDiv.appendChild(objNote);

        } else if(type == 3) {
        	objDiv.appendChild(document.createElement('br'));
        	objDiv.appendChild(objFile);
    		objDiv.appendChild(objLink);
    		objDiv.appendChild(document.createElement('br'));
        }

        var objDivList = $('#divUploadList' + type);
		objDivList.append(objDiv);

		var objOldLink = document.getElementById('linkAdd_' + index);
		if(objOldLink) {
			objOldLink.innerHTML = "Remove";
			objOldLink.setAttribute("onclick", "removeFile(" + index + ", " + type + ")");
		}

		$('#hidUploadCount').val(parseFloat(index) + 1);
    }

    function addFirstFile(type) {

    	var index = 0;
        var nextIndex = parseFloat(index) + 1;
        nextIndex = index;

        if(countValidFile() == 2) {
        	var objDivList_ = document.getElementById('divUploadList' + type);
    		objDivList_.setAttribute("style", "overflow-y: scroll; height: 200px");
    	}
        var objFile = document.createElement('input');
    	objFile.setAttribute('type', 'file');
    	objFile.setAttribute('id', 'fileUpload_' + nextIndex);
    	objFile.setAttribute('name', 'fileUpload_' + nextIndex);

    	var objLink = document.createElement('a');
    	objLink.setAttribute('href', '#');
    	objLink.setAttribute('id', 'linkAdd_' + nextIndex);
    	objLink.setAttribute('name', 'linkAdd_' + nextIndex);
    	objLink.innerHTML = "Add";
    	objLink.setAttribute('onclick', 'addFile(' + type + ')');

    	var objDiv = document.createElement('div');
    	objDiv.setAttribute('id', 'divFile_' + nextIndex);

        if(type == 1) {
        	var objNote = document.createElement('input');
        	objNote.setAttribute('type', 'text');
        	objNote.setAttribute('id', 'txtNote_' + nextIndex);
        	objNote.setAttribute('name', 'txtNote_' + nextIndex);
        	objNote.setAttribute('style', 'width: 95%');

        	var objSpan = document.createElement('span');
        	objSpan.innerHTML = "Note";

        	objDiv.appendChild(document.createElement('br'));
        	objDiv.appendChild(objFile);
    		objDiv.appendChild(objLink);
    		objDiv.appendChild(document.createElement('br'));
    		objDiv.appendChild(objSpan);
    		objDiv.appendChild(document.createElement('br'));
    		objDiv.appendChild(objNote);

        } else if(type == 3) {
        	objDiv.appendChild(document.createElement('br'));
        	objDiv.appendChild(objFile);
    		objDiv.appendChild(objLink);
    		objDiv.appendChild(document.createElement('br'));
        }

        var objDivList = $('#divUploadList' + type);
		objDivList.append(objDiv);


		var objDivList_ = document.getElementById('divUploadList' + type);
		objDivList_.setAttribute("style", "");


    }

    function removeFile(i, type) {
      $('#divFile_' + i).remove();

      if(countValidFile() <= 2) {
    	  var objDivList_ = document.getElementById('divUploadList' + type);
          objDivList_.setAttribute("style", "");
      }
    }

    function countValidFile() {
    	var count = 0;
    	for(var i = 0; i <= $('#hidUploadCount').val(); i++) {
      	    if($('#divFile_' + i).is(':visible')) {
      	    	count++;
          	}
        }
        return count;
    }

    /*
     * type = 1: upload image list
     * type = 3: upload music
     */
    function resetFileList(type) {
    	for(var i = 0; i <= $('#hidUploadCount').val(); i++) {
        	$('#divFile_' + i).remove();
        }

    	// add first element when upload list image or music
    	if(type == 1 || type == 3) {
        	addFirstFile(type);
        }
    	$('#hidUploadCount').val(0);
    }


</script>



{% endblock %}


